<button class="download-btn">
  <svg
    id="download"
    viewBox="0 0 24 24"
    data-name="Layer 1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.29,17.29,13,18.59V13a1,1,0,0,0-2,0v5.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l3-3a1,1,0,0,0-1.42-1.42ZM18.42,6.22A7,7,0,0,0,5.06,8.11,4,4,0,0,0,6,16a1,1,0,0,0,0-2,2,2,0,0,1,0-4A1,1,0,0,0,7,9a5,5,0,0,1,9.73-1.61,1,1,0,0,0,.78.67,3,3,0,0,1,.24,5.84,1,1,0,1,0,.5,1.94,5,5,0,0,0,.17-9.62Z"
    ></path>
  </svg>
</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: purple, button, download, #button */
.download-btn {
  border: 2px solid rgb(168, 38, 255);
  background-color: white;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  cursor: pointer;
}
.download-btn svg {
  width: 25px;
  height: 25px;
  transition: all 0.3s ease;
}
.download-btn:hover svg {
  fill: white;
}
.download-btn:hover {
  background-color: rgb(168, 38, 255);
}

</style>
    